<%--
  Created by IntelliJ IDEA.
  User: 86189
  Date: 2022/4/25
  Time: 22:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>柱状图</title>
    <script src="./layui-v2.6.8/layui/layui.js" charset="utf-8"></script>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 柱状图-->
<div class="layui-card" style="margin-left: 50px">

    <div class="layui-card-body">
        <div id="EchartZhuZhuang" style="width:100%; height: 250px; margin-top: -60px"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    layui.use([ 'jquery', 'form', 'layer', 'laydate', 'table', 'layedit',
            'upload', 'element', 'carousel' ],
        function() {

            var $ = layui.jquery;
            var element = layui.element;
            carousel = layui.carousel;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var table = layui.table;
            var layedit = layui.layedit;
            var upload = layui.upload;


            var chartZhuZhuang = echarts.init(document
                .getElementById('EchartZhuZhuang'));

            //指定图表配置项和数据
            var optionchart = {

                tooltip : {},
                legend : {
                    data : [ '数据量' ]
                },
                xAxis : {
                    data : [ '${kctop5[0].kcm}','${kctop5[1].kcm}','${kctop5[2].kcm}','${kctop5[3].kcm}','${kctop5[4].kcm}']
                },
                yAxis : {
                    type : 'value'
                },
                series : [ {
                    name : '选课人数',
                    type : 'bar', //柱状
                    data : [ ${kctop5[0].con}, ${kctop5[1].con}, ${kctop5[2].con}, ${kctop5[3].con}, ${kctop5[4].con}],
                    itemStyle : {
                        normal : { //柱子颜色
                            color : 'red'
                        }
                    },
                },]
            };




            chartZhuZhuang.setOption(optionchart, true); // 柱状图



        });
</script>
</html>
